<template>
  <view>
    <view style="position: fixed;top:0;z-index: 999;left: 0;width: 100%;">
      <kt-nav-bar
          v-if="opt === 'update'"
          :title="'Employee Edit'"></kt-nav-bar>
      <kt-nav-bar
          v-else
          :title="'Employee Add'"></kt-nav-bar>
    </view>
    <view style="opacity: 0;">
      <kt-nav-bar
          :title="'Employee Add'"></kt-nav-bar>
    </view>

    <view
        @click="uploadLogo()"
        class="box a-box">
      <view style="display: inline-block;vertical-align: top;width: calc(100% - 200rpx)">
        <view style="height: 20rpx"></view>
        <view class="title">
          <!-- 员工头像 -->
          {{ "Employee avatar" }}
        </view>
        <view class="tips">
          {{ "Click here to modify the Employee avatar" }}
        </view>
      </view>
      <view
          style="margin-top: 40rpx"
          class="avatar-box">
        <image
            v-if="requestParam.fileIdOfAvatar"
            class="avatar"
            mode="widthFix"
            :src="$kt.file.visit(requestParam.fileIdOfAvatar)"></image>
      </view>
    </view>

    <view class="box">
      <view>{{"Employee Name"}}</view>
      <view style="height: 10rpx"></view>
      <input
          class="info-input"
          v-model="requestParam.name"
          :placeholder="'Please enter the employee name'"
      ></input>
    </view>


    <!-- 性别 -->
    <view class="box">
      <view>{{"Gender"}}</view>
      <view style="height: 10rpx"></view>
      <view>
        <view
            @click="requestParam.genderCode = 'male'"
            class="btn-plus"
            :class="{'btn-plus-selected':requestParam.genderCode === 'male'}"
        >
          {{"male"}}
        </view>
        <view
            @click="requestParam.genderCode = 'female'"
            class="btn-plus"
            :class="{'btn-plus-selected':requestParam.genderCode === 'female'}"
        >
          {{"female"}}
        </view>
      </view>
    </view>

    <!-- 生日 -->
    <view
        @click="$refs.datePickerOfBirthday.open()">
      <view class="box">
        <u-row>
          <u-col :span="8">
            <view class="title">
              {{ "Birthday" }}
            </view>
          </u-col>
          <u-col :span="4">
            <view style="text-align: right;font-size: 36rpx">
              {{requestParam.gmtBirthday ? $kt.date.format(requestParam.gmtBirthday,"yyyy-MM-dd") : ""}}
            </view>
          </u-col>
        </u-row>
      </view>
    </view>



    <!-- 上班时间 -->
    <view
        @click="$refs.datePickerOfWorkTime.open(requestParam.workTime)"
        class="box">
      <u-row>
        <u-col :span="8">
          <view class="title">
            {{ "Working time" }}
          </view>
        </u-col>
        <u-col :span="4">
          <view style="text-align: right;font-size: 36rpx">
            {{requestParam.workTime}}
          </view>
        </u-col>
      </u-row>
    </view>

    <!-- 下班时间 -->
    <view class="box">
      <view
          @click="$refs.datePickerOfOffWorkTime.open(requestParam.offWorkTime)">
        <u-row>
          <u-col :span="8">
            <view class="title">
              {{ "Off work time" }}
            </view>
          </u-col>
          <u-col :span="4">
            <view style="text-align: right;font-size: 36rpx">
              {{requestParam.offWorkTime}}
            </view>
          </u-col>
        </u-row>
      </view>
      <view style="height: 20rpx"></view>
      <view>
        <u-row>
          <u-col :span="10.5">
            <view class="title">
              {{ "Is next day off work" }}
            </view>
          </u-col>
          <u-col :span="1.5">
              <u-switch
                  style="float: right"
                  v-model="requestParam.isNextDayOffWork"
                  size="40"
                  activeColor="#000"
              ></u-switch>
          </u-col>
        </u-row>
      </view>
    </view>

    <!-- 入职日期 -->
    <view class="box">
      <view
          @click="$refs.datePickerOfGmtEntry.open()">
        <u-row>
          <u-col :span="8">
            <view class="title">
              {{ "Entry date" }}
            </view>
          </u-col>
          <u-col :span="4">
            <view style="text-align: right;font-size: 36rpx">
              {{requestParam.gmtEntry ? $kt.date.format(requestParam.gmtEntry,"yyyy-MM-dd") : ""}}
            </view>
          </u-col>
        </u-row>
      </view>
    </view>

    <!-- 账号 -->
    <view class="box">
      <view>{{"Username"}}</view>
      <view style="height: 10rpx"></view>
      <input
          class="info-input"
          v-model="requestParam.username"
          :placeholder="'Please enter the username'"
      ></input>
    </view>

    <view
        v-if="opt==='add'"
        class="box">
      <view>{{"Password"}}</view>
      <view style="height: 10rpx"></view>
      <input
          class="info-input"
          v-model="requestParam.password"
          :placeholder="'Please enter the password'"
      ></input>
    </view>

    <!-- 证书列表 -->
    <view
        v-if="certificateList&&certificateList.length>0"
        class="box">
      <view>{{"Certificates"}}</view>
      <view style="height: 10rpx"></view>
      <view
          v-for="(item,index) in certificateList"
          @click="selectCertificate(item)"
          class="btn-plus"
        :class="{'btn-plus-selected':isCertificateSelected(item)}"
      >
        {{item.name}}
      </view>
    </view>


    <view class="bottom">
      <kt-button
          @click="toSave"
          ref="saveBtn"
          :is-open-box-shadow="false"
          class="bottom-btn">
        {{ "Confirm" }}
      </kt-button>
    </view>

    <h-m-date-picker
    ref="datePickerOfWorkTime"
    @select="workTimeSelect"
    ></h-m-date-picker>

    <h-m-date-picker
      ref="datePickerOfOffWorkTime"
      @select="offWorkTimeSelect"
    ></h-m-date-picker>

    <y-m-d-picker
      ref="datePickerOfGmtEntry"
      @select="gmtEntrySelect">
    </y-m-d-picker>

    <y-m-d-picker
      ref="datePickerOfBirthday"
      @select="birthdaySelect">
    </y-m-d-picker>

    <certificate-popup
    ref="certificatePopup"
    @select="selectCertificate"
    ></certificate-popup>

  </view>
</template>

<script>
export default {
  data() {
    return {
      requestParam:{
        id:null,
        fileIdOfAvatar: "",
        gmtBirthday: new Date("1979-01-21 00:00:00").getTime(),
        name:"",
        enterpriseId: "",
        departmentId: "",
        workTime:"9:00",
        offWorkTime:"18:00",
        isNextDayOffWork:false,
        // 入职日期
        gmtEntry:new Date().getTime(),
        minDate: new Date("1979-01-21 00:00:00").getTime(),
        empCertificates:[],
        genderCode: "",
      },
      opt:null,
      certificateList:[]
    };
  },
  onLoad(option) {
    this.requestParam.id = option.id;
    this.requestParam.enterpriseId = option.enterpriseId;
    this.requestParam.departmentId = option.departmentId;
    this.opt = option.opt;
    if(!this.requestParam.empCertificates){
      this.requestParam.empCertificates = [];
    }
    this.getCertificateAll();
    if(this.requestParam.id){
      this.getById();
    }
  },
  methods: {
    getCertificateAll() {
      this.$kt.request.send({
        uri: '/business-erp-web/erpCertificate/getAll',
        method: 'POST',
        data:{
          enterpriseId: this.requestParam.enterpriseId
        },
        stateSuccess: (res) => {
          this.certificateList = res.data;
          this.filter();
        },
      });
    },
    // 是否已选择
    isCertificateSelected(item){
      for(let i = 0; i < this.requestParam.empCertificates.length; i++){
        if(this.requestParam.empCertificates[i].certificateId === item.id){
          return true;
        }
      }
    },
    selectCertificate(e){
      for(let i = 0; i < this.requestParam.empCertificates.length; i++){
        if(this.requestParam.empCertificates[i].certificateId === e.id){
          this.requestParam.empCertificates.splice(i,1);
          return;
        }
      }
      this.requestParam.empCertificates.push({
        certificateId:e.id,
      });
    },
    workTimeSelect(e){
      this.requestParam.workTime = e;
    },
    offWorkTimeSelect(e){
      this.requestParam.offWorkTime = e;
    },
    gmtEntrySelect(e){
      this.requestParam.gmtEntry = new Date(e).getTime();
    },
    birthdaySelect(e){
      this.requestParam.gmtBirthday = new Date(e).getTime();
    },
    getById() {
      this.$kt.request.send({
        uri: '/business-erp-web/erpEmp/getById',
        data: {
          id: this.requestParam.id
        },
        stateSuccess: (res) => {
          this.requestParam = res.data;
        },
        stateFail: (res) => {
        }
      });
    },
    uploadLogo() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.$kt.image.toImageClip(res.tempFilePaths[0],300,300).then((data)=>{
            uni.showLoading();
            // 上传头像
            this.$kt.request.uploadFile({
              data: {
                file: data,
                groupCode: 'empAvatar'
              },
              stateSuccess: (res1) => {
                this.requestParam.fileIdOfAvatar = res1.data.id;
                this.$forceUpdate();
                uni.hideLoading();
              },
              stateFail: (err) => {
              }
            })
          });
        }});
    },
    toSave() {
      let uri = '/business-erp-web/erpEmp/add';
      if(this.opt === "update"){
        uri = '/business-erp-web/erpEmp/update';
      }
      this.$refs.saveBtn.loading();
      this.$kt.request.send({
        uri,
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$refs.saveBtn.success(res.msg);
          this.$kt.event.emit("employeeSave");
          uni.navigateBack();
        },
        stateFail: (res) => {
          this.$refs.saveBtn.error(res.errMsg);
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar-box {
  position: absolute;
  display: inline-block;
  width: 100rpx;
  height: 100rpx;
  border-radius: 20rpx;
  overflow: hidden;
  border: none;
  vertical-align: top;
  top:-20rpx;
  right: 40rpx;

  .avatar {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

}
.box {
  position: relative;
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 10rpx;

  .title {
    position: relative;
    font-size: 36rpx;
    color: #333;

    .title-plus {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 32rpx;
      color: #666;
      border: 1rpx solid #666666;
      border-radius: 55%;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

  }

  .tips {
    font-size: 24rpx;
    color: #666;
  }

  text-align: left;
  border: none;
  border-bottom: 1rpx solid #f0f0f0;
  background-color: #fff;

  .info-input {
    width: 100%;
    border: none;
    font-size: 32rpx;
    color: #000;
    background-color: #fff;
    font-weight: bold;
  }
}

.a-box {
  border: none;
  border-bottom: 1rpx solid #f0f0f0;
}

.a-box:active {
  opacity: .8;
}

.bottom{
  position: fixed;
  width: 100%;
  bottom: 0;
  padding: 40rpx;
  box-sizing: border-box;
}

.bottom-btn{
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  bottom: 0;
}

.bottom-btn:active{
  opacity: .8;
}

.btn-plus{
  display: inline-block;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
  border-radius: 30rpx;
  padding: 10rpx 20rpx;
  background-color: #f0f0f0;
  margin: 10rpx;
}

.btn-plus:active{
  opacity: .6;
}

.btn-plus-selected{
  background-color: #666;
  color: #fff;
}

</style>
